<template>
  <div class="login">
    <div class="login-box">
      <div class="title">
        生产管理平台
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="account">
          <el-input v-model="ruleForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button @click="sumbit" class="submit-btn" type="primary">登录</el-button>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  layout: 'login',
  data() {
    return {
      ruleForm: {
        account: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],

      }
    }
  },
  methods: {
    sumbit() {
      this.$router.push('/equipmentStatus')
    }
  },  
  beforeCreate() {
    // this.$router.push('/equipmentStatus')
  }
}
</script>

<style lang="less">
.login-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: #f1f1f1;
  box-shadow: 0 0 4px 4px #efefef;
  border-radius: 8px;
  .title {
    font-size: 24px;
    color: #333;
    text-align: center;
    padding: 20px 0;
  }
  .demo-ruleForm {
    width: 460px;
    margin: 60px auto;
    padding-right: 60px;
  }
  .footer {
    text-align: center;
  }
  .submit-btn {
    width: 200px;
  }
}


.disc {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  &.success {
    background: #67C23A;
  }
  &.warn {
    background: #E6A23C;
  }
  &.error {
    background: #Ff1C1C;
  }
  &.disable {
    background: #909399;
  }
}
</style>
